<script setup lang="ts">
import TeacherDetail from "@/views/index/teacherDetail.vue";

import {ArrowRight} from '@element-plus/icons-vue'
</script>

<template>
    <div>
        <div class="box">
            <div class="tit">
                <div class="previous">
                    <span>名师推荐</span>
                </div>
                <div class="titMore">
                    <router-link to="/teacherList"><span>更多</span></router-link>
                    <el-icon>
                        <ArrowRight/>
                    </el-icon>
                </div>
            </div>
            <div class="substance">
                <teacher-detail></teacher-detail>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">

.box {
    background-color: #fff;
    border-radius: 3%;
    min-height: 75vw;
}

.tit {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(42, 43, 65, 0.2);
    min-height: 10vw;
    line-height: 10vw;

    .previous {
        position:relative;
        &::before{
            content: '';
            display: block;
            position: absolute;
            width: 3px;
            height: 1.0em;
            background-color: #419CFD;
            top: 30%;
        }
        span {
            margin-left: 6px;
            font-weight: 700;
            font-size: 20px;
        }
    }

    .titMore {
        span:first-child {
            font-weight: 700;
            font-size: 20px;
            color: #419CFD;
        }
    }
}

.substance {
    display: flex; /* 使用flex布局 */
    overflow-x: auto; /* 超出宽度时出现水平滚动条 */
    white-space: nowrap; /* 防止子元素换行 */
    width: 100%;
    padding: 4%;
    box-sizing: border-box;
}
</style>